/*
* appearance-none 去除复选框默认样式
* opacity-0 透明
* has-[:checked]:justify-end 检查子元素选中时添加样式
* */
export default function Page(){
  return (
    <div className={'bg-gray-300 w-44 h-20 mx-auto mt-10 relative rounded-[40px] p-5 has-[:checked]:bg-green-500'}>
      <input className={' absolute inset-0 bg-purple-700 appearance-none opacity-0 cursor-pointer z-50 peer'} type={'checkbox'}/>
      <div className={'absolute size-[40px] bg-white rounded-full left-[25px] peer-checked:left-28 duration-[0.6s]'}></div>
    </div>
  )
}
